<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" showSummary
      :summaryMethod="getTotal"
    >

      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="hash.username" label="员工姓名" width="120"></el-table-column>
      <el-table-column prop="hash.sqdeptname" label="员工部门" width="220"></el-table-column>

      <el-table-column prop="hash.examinetime" label="请款日期" width="120"></el-table-column>
      <el-table-column label="支付状态" width="200">
        <template slot-scope="scope">
          <el-select style="width:90%;padding-right: 30px;" v-model="scope.row.hash.moneystatus" placeholder="请选择支付状态" @change="dochange(scope.row)">
            <el-option v-for="item in paystatus" :key="item.pname" :label="item.pname" :value="item.pname"></el-option>
          </el-select>

        </template>
      </el-table-column>

      <el-table-column prop="hash.capitaltypename" label="请款大类" width="180"></el-table-column>
      <el-table-column prop="hash.childcapitaltypename" label="小类" width="180"></el-table-column>
      <el-table-column prop="hash.amount" label="请款金额" width="120"></el-table-column>
      <el-table-column prop="hash.deptname" label="请款部门" width="180"></el-table-column>
      <el-table-column prop="hash.detail" label="请款内容" width="200">
        <template slot-scope="scope">
          <div @click="opendiag(scope.row)" style="color:#26a2ff;cursor:pointer">
            {{scope.row.hash.detail}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="hash.beizhu" label="备注" width="180"></el-table-column>
      <el-table-column prop="hash.amountidstatus" label="是否报销" width="80"></el-table-column>

    </el-table>
    <el-pagination @current-change="handleCurrentChange" :currentPage.sync="pagobj.currentPage3" :pageSize="pagobj.pagesize" layout="total, prev, pager, next"
      :total="pagobj.total" style="margin:20px 0;text-align:center"
    ></el-pagination>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible2: false,
      dialogVisible: false,
      ts: this.newStore(),
      moneystatus: '',
      paystatus: [{ pname: '未付款' }, { pname: '支票未回票' }, { pname: '汇款未回票' }, { pname: '支票已回票' }, { pname: '汇款已回票' }],

    };
  },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    pagobj: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleCurrentChange() {
      this.$parent.getlist();
    },
    dochange(row) {
      console.log(row, '111111111');

      const req = {
        handle: 'E0E144082D7A10B2DC400B628CBD4AE86FD3EDA6633389D14E476815EFEAD4D1D47247C170B661DC',
        moneystatus: row.hash.moneystatus,
        capitalid: row.hash.capitalid,
      };
      if (row.hash.etype == '2') {
        req.handle = 'E0E144082D7A10B2DC400B628CBD4AE89598714ED4F3EC7E0478B0D33E2DA35F';
      }
      if (row.hash.etype == '3') {
        req.handle = 'E0E144082D7A10B2DC400B628CBD4AE86FD3EDA6633389D14E476815EFEAD4D1D47247C170B661DC';
      }
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // this[arrname] = ts.d.data.operation1;
        // console.log(ts.d.data.operation1,'支付方式')
      });
    },
    opendiag(item) {
      this.$parent.opendiag(item);
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        console.log(column.property);
        if (column.property == 'hash.amount') {
          const values = data.map(item => Number(item.hash.amount));

          console.log(data);
          console.log(values);

          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            }
            return prev;
          }, 0);
        } else {
          sums[index] = '--';
        }
      });

      return sums;
    },
  },
};
</script>

<style>
.cell {
  text-align: center;
}
</style>
